<template>
	<div :id="id"></div>
</template>

<script>
	//tui-editor
	LoadScript("/vue/libs/tui-editor/tui-editor-Editor-full.min.js");
	LinkCssOrScss("/vue/libs/tui-editor/tui-editor.min.css");
	import defaultOptions from '/vue/components/markdowneditor/default-options.js'

	module.exports = {
		name: 'MarddownEditor',
		props: {
			value: {
				type: String,
				default: ''
			},
			id: {
				type: String,
				required: false,
				default() {
					return 'markdown-editor-' + +new Date() + ((Math.random() * 1000).toFixed(0) + '')
				}
			},
			options: {
				type: Object,
				default() {
					return defaultOptions
				}
			},
			mode: {
				type: String,
				default: 'markdown'
			},
			height: {
				type: String,
				required: false,
				default: '300px'
			},
			language: {
				type: String,
				required: false,
				default: 'en_US' // https://github.com/nhnent/tui.editor/tree/master/src/js/langs
			}
		},
		data() {
			return {
				editor: null
			}
		},
		computed: {
			editorOptions() {
				const options = Object.assign({}, defaultOptions, this.options)
				options.initialEditType = this.mode
				options.height = this.height
				options.language = this.language
				return options
			}
		},
		watch: {
			value(newValue, preValue) {
				if (newValue !== preValue && newValue !== this.editor.getValue()) {
					this.editor.setValue(newValue)
				}
			},
			language(val) {
				this.destroyEditor()
				this.initEditor()
			},
			height(newValue) {
				this.editor.height(newValue)
			},
			mode(newValue) {
				this.editor.changeMode(newValue)
			}
		},
		mounted() {
			this.initEditor()
		},
		destroyed() {
			this.destroyEditor()
		},
		methods: {
			initEditor() {
				this.editor = new tui.Editor({
					el: document.getElementById(this.id),
					...this.editorOptions
				})
				if (this.value) {
					this.editor.setValue(this.value)
				}
				this.editor.on('change', () => {
					this.$emit('input', this.editor.getValue())
				})
			},
			destroyEditor() {
				if (!this.editor) return
				this.editor.off('change')
				this.editor.remove()
			},
			setValue(value) {
				this.editor.setValue(value)
			},
			getValue() {
				return this.editor.getValue()
			},
			setHtml(value) {
				this.editor.setHtml(value)
			},
			getHtml() {
				return this.editor.getHtml()
			}
		}
	}
</script>
